<template>
	<div>
		<el-form :inline="true" :model="query" label-width="110px" size="small">
			<!-- 申请ID查询 -->
			<el-form-item label="企业名称：" class="query-form-item">
				<el-input v-model="query.enterprisename" placeholder="请输入商家名称" prefix-icon="el-icon-search" @change="onSubmit"
					clearable></el-input>
			</el-form-item>
			<!-- 申请公司名称查询 -->
			<el-form-item label="统一信用代码：" class="query-form-item">
				<el-input v-model="query.registrationnumber" placeholder="请输入信用代码" prefix-icon="el-icon-search"
					@change="onSubmit" clearable></el-input>
			</el-form-item>
			<el-form-item label="联系人：" class="query-form-item">
				<el-input v-model="query.egalpersonname" placeholder="请输入联系人" prefix-icon="el-icon-search"
					@change="onSubmit" clearable></el-input>
			</el-form-item>
			<el-form-item label="手机号码：" class="query-form-item">
				<el-input v-model="query.usermobile" placeholder="请输入联系电话" prefix-icon="el-icon-search"
					@change="onSubmit" clearable></el-input>
			</el-form-item>
			<!-- 查询框 -->
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onSubmit" size="small">查询</el-button>
			</el-form-item>
		</el-form>
		<el-form :inline="true" :model="formEditData" ref="editRules" label-width="110px" class="sss">
			<!-- 导出时间 -->
			<el-form-item label="导出时间：">
				<el-date-picker v-model="createTime" unlink-panels type="datetimerange" :picker-options="pickerOptions"
					range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" align="left"
					format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
					:default-time="['00:00:00', '23:59:59']" @change="dateChange"></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :loading="isEditing" @click="excell" size="small" style="margin-left: 30px">批量导出</el-button>
				<el-button type="primary" :loading="isEditing" @click="excellAll" size="small" style="margin-left: 30px">全部导出</el-button>
			</el-form-item>
		</el-form>
		<!-- table表单 -->
		<el-table ref="multipleTable" v-loading="loading" :data="tableData"
			:header-cell-style="{ background: '#F4F4F5', color: '#606266' }" border
			@selection-change="handleSelectionChange">
			<el-table-column type="selection"  width="55" fixed  ></el-table-column>
			<el-table-column label="序号" type="index" width="80" fixed align="center">
				<template slot-scope="scope">
					<span>{{(query.currentPage - 1) * query.pageSize + scope.$index + 1}}</span>
				</template>
			</el-table-column>
			<el-table-column label="企业名称" align="center" width="250">
				<template slot-scope="scope">
					<el-button type="text" @click="toDetail(scope.row)">{{scope.row.enterprisename}}</el-button>
				</template>
			</el-table-column>
			<el-table-column label="统一信用代码" prop="registrationnumber" align="center" width="250"/>
			<el-table-column label="联系人" prop="egalpersonname" align="center" width="150"/>
			<el-table-column label="手机号码" prop="usermobile" align="center" width="150"/>
			<el-table-column label="扣税总额" prop="taxtotal" align="center" width="150">
				<template slot-scope="scope">
					<span v-if="scope.row.taxtotal != null">{{scope.row.taxtotal}}</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
			<el-table-column label="可返税总额" prop="refundabletax" align="center" />
			<el-table-column label="注册时间：" width="180">
				<template slot-scope="scope">
					<i class="el-icon-time" v-if="scope.row.userregisttime != null"></i>
					<span v-if="scope.row.userregisttime != null">{{scope.row.userregisttime | formatDateStr("yyyy-MM-dd hh:mm:ss")}}</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="150">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="toDetail(scope.row)">查看详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination class="pagination-container" background :page-size="query.pageSize"
			@size-change="handleSizeChange" @current-change="handleCurrentChange"
			layout="total,sizes,prev, pager, next, jumper" :current-page="this.query.currentPage"
			:page-sizes="[5, 10, 20, 30, 50]" :total="totalNumber"></el-pagination>
	</div>
</template>
<script>
	import {
		BASE_URL
	} from "../../config/app";
	import {
		queryUserTaxHDPage
	} from "../../api/fundsManagement";
	export default {
		data() {
			return {
				isEditing: false, //是否在修改
				tableData: [], //列表集合
				createTime: [], //时间数组
				mupArr:[],//表格点击选中的数组
				pickerOptions: {
					//快速选择日期
					shortcuts: [{
							text: "最近一周",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近一个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近三个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近六个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
								picker.$emit("pick", [start, end]);
							},
						},
					],
				},
				query: {
					currentPage: 1,
					pageSize: 5,
					enterprisename: "",//企业名称
					registrationnumber: "",//统一信用代码
					egalpersonname: "",//联系人
					usermobile: "",//手机号
				},
				formEditData: {
					userid: "",
					starttime: "", //开始时间
					endtime: "", //结束时间
				},
				totalNumber: 0,
				loading: false,
			};
		},
		methods: {
			toDetail(row) {
				this.$router.push({
					path: "taxationDetail",
					query: row
				});
			},
			//多选
			handleSelectionChange(val) {
				this.mupArr = val;
				let ids = this.mupArr.map((item) => item.userid).join(",");
				this.formEditData.userid = ids;
			},
			/*日期选择事件*/
			dateChange(val) {
				if (val == null) {
					this.formEditData.starttime = "";
					this.formEditData.endtime = "";
				} else {
					this.formEditData.starttime = val[0];
					this.formEditData.endtime = val[1];
					this.formEditData.currentPage = 1;
				}
				// this.getList();
			},
			//批量导出功能
			excell() {
				this.isEditing = true;
				if(this.mupArr.length==0){
					this.$message.error('请选择要导出的商家')
					this.isEditing = false;
					return
				}
				let userid=this.formEditData.userid
				let starttime=this.formEditData.starttime
				let endtime=this.formEditData.endtime
				window.location.href =BASE_URL +"/goldendays-order/MbUserTax/getProfitTaxVo?userid=" +userid +"&starttime=" +starttime +"&endtime=" +endtime;
				this.isEditing = false;
			},
			/**
			 * 全部导出
			 */
			excellAll() {
				this.isEditing = true;
				let userid=""
				let starttime=this.formEditData.starttime
				let endtime=this.formEditData.endtime
				window.location.href =BASE_URL +"/goldendays-order/MbUserTax/getProfitTaxVo?userid=" +userid +"&starttime=" +starttime +"&endtime="+endtime;
				this.isEditing = false;
			},

			// 列表数据获取
			getList() {
				this.loading = true;
				queryUserTaxHDPage(this.query)
					.then((data) => {
						if (data.code != 0) {
							this.$message.error(response.message);
							this.loading = false;
							return false;
						}
						this.tableData = data.data.list || [];
						this.totalNumber = data.data.totalNumber || 0;
						// console.log(this.tableData)
						setTimeout(() => {
							this.loading = false;
						}, 0.3 * 1000);
					})
					.catch((err) => {
						this.loading = false;
						this.tableData = [];
					});
			},
			//查询
			onSubmit() {
				this.query.currentPage = 1;
				this.getList();
				// console.log('submit!');
			},
			handleCurrentChange(val) {
				this.query.currentPage = val;
				//scrollTo(0, 800);
				this.getList();
			},
			handleSizeChange(val) {
				this.query.pageSize = val;
				this.getList();
			},
		},

		mounted() {},
		created() {
			this.getList();
		},
	};
</script>
